<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Global Mall</title>
  <link rel="icon" href="assets/image/logo/favicon.png" type="image/png" sizes="32x32">
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
  <link rel="stylesheet" type="text/css" href="assets/fonts/css2.css">
  <link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>

<body>
  <div class="preloader"></div>
  <?php
  include 'header.php';
  ?>
  <!-- cart blog -->
  <div class="mb-3 mt-3">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <ul class="breadcums">
            <li class="d-inline-block font-weight-bolder button-group2">
              <a href="index.php" class="login_txt symbol2 pro_home"></a>
            </li>
            <li class="d-inline-block hr_ font-weight-bolder"><a href="#" class="login_txt">我的购物车</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- cart detail -->
  <?php
  // 判断是否登录
  if (!isset($_SESSION['user_id'])) {
    echo "<script>alert('请先登录！');window.location.href='login.php';</script>";
    exit;
  }

  // 获取当前用户ID
  $user_id = $_SESSION['user_id'];

  // 查询购物车中的商品信息
  $sql = "SELECT c.id, c.product_id, c.quantity, c.total, p.name, p.price, p.image 
        FROM cart c
        JOIN products p ON c.product_id = p.id
        WHERE c.user_id = $user_id";
  $result = mysqli_query($conn, $sql);

  // 获取购物车总金额
  $total_amount = 0;
  $cart_items = [];
  while ($row = mysqli_fetch_assoc($result)) {
    $cart_items[] = $row;
    $total_amount += $row['total'];
  }
  ?>

  <div class="container cart-page">
    <div class="row">
      <div class="col-12 col-lg-8">
        <div class="card">
          <div class="card-header cart_header bg-white">
            <div class="card-title mb-0">
              <div class="row">
                <div class="col-12">
                  <h5 class="mb-0"><i class="fas fa-shopping-cart"></i>&nbsp;&nbsp;购物车</h5>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body cart_body">
            <?php if (empty($cart_items)): ?>
              <div class="text-center">
                <img src="assets/image/svg/cart.svg" alt="empty cart" class="img-fluid" style="width: 150px;height:auto;margin-bottom:10px;">
                <p>购物车空空如也，赶紧选购吧！</p>
              </div>
            <?php else: ?>
              <?php foreach ($cart_items as $item): ?>
                <div class="row cart-item" data-cart-id="<?= $item['id'] ?>">
                  <div class="col-12 col-md-6 pr-0">
                    <div class="d-flex">
                      <div class="col-xl-4 col-lg-5 col-md-4 col-4 px-0">
                        <a href="#"><img src="<?= $item['image'] ?>" class="mx-auto d-block img-fluid" alt="product"></a>
                      </div>
                      <div class="col-xl-8 col-lg-7 col-md-8 col-8 pr-0">
                        <h2 class="product-name font-weight-bold mt-sm-2 mt-md-2"><a href="#"><?= $item['name'] ?></a></h2>
                        <div><span class="font-weight-bolder">￥<?= number_format($item['price'], 2) ?></span></div>
                        <div class="my-1 f_13">
                          <span>数量:</span>
                          <span><?= $item['quantity'] ?></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-md-6 mt-4">
                    <div class="d-flex">
                      <div class="wodecart">
                        <span class="font-weight-bold">￥<?= number_format($item['total'], 2) ?></span>
                      </div>
                      <div class="col-md-2 col-sm-4 col-2 my-2 mt-1 text-right text-md-left">
                        <a href="#" class="delete-cart-item" data-cart-id="<?= $item['id'] ?>"><i class="fas fa-trash-alt delete_ico"></i></a>
                      </div>
                    </div>
                  </div>
                </div>
                <hr>
              <?php endforeach; ?>
            <?php endif; ?>
          </div>
          <?php if (!empty($cart_items)): ?>
            <div class="card-footer">
              <div class="row">
                <div class="col-6 col-sm-7 text-right">
                  <div class="my-2 font-weight-bold">
                    <span>总金额:</span>
                    <span style="color: red;font-size: 18px;">￥<?= number_format($total_amount, 2) ?></span>
                  </div>
                </div>
                <div class="col-6 col-sm-5">
                  <a href="checkout.php" class="btn btn-success btn-block font-weight-bold">结算</a>
                </div>
              </div>
            </div>
          <?php endif; ?>
        </div>
      </div>      
      <div class="col-12 col-lg-4 mt-lg-0 mt-4">
        <div class="border bg-white bill_pay">
          <div class="card-body border-bottom">
            <p class="text-muted">共 <?= count($cart_items) ?> 件商品</p>
            <br>
            <p class="font-weight-bolder">订单明细</p>
            <div>
              <span class="font-weight-bold">商品金额</span>
              <span class="float-right font-weight-bold">￥<?= number_format($total_amount, 2) ?></span>
            </div>
            <div>
              <span class="font-weight-bold">运费</span>
              <span class="float-right font-weight-bold">￥0.00</span>
            </div>
          </div>
          <div class="card-body">
            <div>
              <span class="font-weight-bold">总金额</span>
              <span class="float-right font-weight-bold">￥<?= number_format($total_amount, 2) ?></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <script>
    // 删除购物车商品的 AJAX 请求
    document.querySelectorAll('.delete-cart-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        const cartId = this.getAttribute('data-cart-id');

        // 发送删除请求到后端
        fetch('cart_delete.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              cart_id: cartId
            })
          })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              // 删除成功，移除该项
              document.querySelector(`.cart-item[data-cart-id='${cartId}']`).remove();
              location.reload();
            } else {
              alert('删除失败，请重试');
            }
          });
      });
    });
  </script>
  <?php
  include 'footer.php';
  ?>
  </script>
  <script src="assets/js/jquery-3.4.1.min.js"></script>
  <script src="assets/js/owl.carousel.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.fancybox.min.js"></script>
  <script src="assets/js/custom.js"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</body>

</html>